<template>
  <!-- 一级指标 -->
  <div class="level" style="padding: 20px">
    <div class="level-left">
      <p class="risk-title">风险预警模型</p>
      <ul class="risk-list">
        <li
          v-for="(item, index) in riskList"
          :key="item.riskModelId"
          @click="getRiskList(item, index)"
          :class="{ active: index == selectitem }"
        >
          {{ item.riskModelName }}
        </li>
      </ul>
    </div>
    <div class="level-right">
      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="handleAdd"
        >新增</el-button
      >
      <el-table
        :header-cell-style="thaderBack"
        :data="tableData"
        style="margin-top: 10px"
      >
        <el-table-column label="序号" width="80" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="primaryIndicatorsName"
          label="指标名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="weight" label="单位权重" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="primaryIndicatorsCode"
          label="编码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="isEnable" label="是否启用" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.isEnable === '0' ? '未启用' : '已启用' }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="left"
          class-name="small-padding fixed-width"
          min-width="50"
        >
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleUpdate(scope.row)"
              ><i class="el-icon-edit"></i>编辑</el-button
            >
            <el-button type="text" size="mini" @click="handleDelete(scope.row)"
              ><i class="el-icon-delete"></i>删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="config.page"
        :page-size="config.limit"
        layout="total,prev, pager, next, jumper"
        :total="total"
        class="pager"
      ></el-pagination>
    </div>
    <el-dialog
      width="30%"
      :title="statusType === 'add' ? '新增' : '编辑'"
      :visible.sync="isShow"
    >
      <el-form ref="FormDetails" :model="FormDetails" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="所属模型" prop="riskModelId">
              <el-select
                v-model="FormDetails.riskModelId"
                placeholder="请选择所属模型"
                style="width: 100%"
              >
                <el-option
                  v-for="item in riskList"
                  :key="item.riskModelId"
                  :label="item.riskModelName"
                  :value="item.riskModelId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="指标名称" prop="primaryIndicatorsName">
              <el-input
                v-model.trim="FormDetails.primaryIndicatorsName"
                placeholder="请输入指标名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="指标编码" prop="primaryIndicatorsCode">
              <el-input
                v-model.trim="FormDetails.primaryIndicatorsCode"
                placeholder="请输入指标编码"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="单位权重" prop="weight">
              <el-input
                v-model.trim="FormDetails.weight"
                placeholder="请输入单位权重"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排序" prop="sort">
              <el-input
                v-model.trim="FormDetails.sort"
                placeholder="请输入排序"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否启用" prop="isEnable">
              <el-select
                v-model="FormDetails.isEnable"
                placeholder="请选择是否启用"
                style="width: 100%"
              >
                <el-option label="未启用" value="0"></el-option>
                <el-option label="已启用" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="submitSend">确 定</el-button>
        <el-button @click="closeDetails" type="button">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { communal } from '@/api/common.js'
export default {
  mixins: [communal],
  data() {
    return {
      url: '/riskWarn/primaryIndicatorsInfo/list',
      addUrl: '/riskWarn/primaryIndicatorsInfo/add',
      editUrl: '/riskWarn/primaryIndicatorsInfo/edit',
      Riskform: {
        pageNum: 1,
        pageSize: 500
      },
      riskList: {},
      form: {
        riskModelId: null
      },
      FormDetails: {
        riskModelId: null,
        primaryIndicatorsName: null,
        primaryIndicatorsCode: null,
        weight: null,
        sort: null,
        isEnable: null
      },
      selectitem: 0
    }
  },
  methods: {
    getRisk() {
      this.$http
        .post('/riskWarn/riskModelInfo/list', this.Riskform)
        .then(res => {
          if (res.code === 200) {
            this.riskList = res.rows
          }
        })
    },
    getRiskList(item, index) {
      this.form.riskModelId = null
      this.form.riskModelId = item.riskModelId
      this.selectitem = index
      this.getList()
    },
    handleUpdate(row) {
      this.resetFormDetails('FormDetails')
      this.$http
        .get(
          '/riskWarn/primaryIndicatorsInfo/detail?primaryIndicatorsId=' +
            row.primaryIndicatorsId
        )
        .then(res => {
          if (res.code === 200) {
            this.FormDetails = res.data
            this.statusType = 'edit'
            this.isShow = true
          }
        })
    },
    handleDelete(row) {
      this.$confirm('是否确认删除?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http
            .post(
              '/riskWarn/primaryIndicatorsInfo/del?primaryIndicatorsIds=' +
                row.primaryIndicatorsId
            )
            .then(response => {
              if (response.code === 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功！'
                })
                this.config.page = 1
                this.getList()
              }
            })
        })
        .catch(function() {})
    }
  },
  created() {
    this.getRisk()
  }
}
</script>

<style lang="scss" scoped>
.active {
  color: orange;
}
</style>
